/* eslint-disable @typescript-eslint/no-unused-vars */
/*
 * @Author: Await
 * @Date: 2025-04-17 16:10:22
 * @LastEditors: Await
 * @LastEditTime: 2025-05-08 09:54:55
 * @Description: 编辑器配置面板 - UI 优化
 */
import React, { useState } from 'react';
import {
    Tabs,
    Typography,
    Divider,
    Button,
    Space,
    Collapse,
    Dropdown,
    Tooltip,
    message
} from 'antd';
import type { MenuProps } from 'antd';
// 导入全局echarts实例
import echarts from '../../utils/echartsInit';
import {
    UndoOutlined,
    RedoOutlined,
    EyeOutlined,
    SaveOutlined,
    UploadOutlined,
    ReloadOutlined,
    MoreOutlined,
    DownloadOutlined,
    BgColorsOutlined
} from '@ant-design/icons';

import { useEditor } from './index';
import ChartTypeSelector from './components/ChartTypeSelector';
import TitleConfig from './components/TitleConfig';
import LegendConfig from './components/LegendConfig';
import AxisConfig from './components/AxisConfig';
import SeriesConfig from './components/SeriesConfig';
import DataMapping from './components/DataMappingExport';
import GridConfig from '../Controls/GridConfig';
import ViewControlConfig from '../Controls/ViewControlConfig';
import LightConfigComponent from '../Controls/LightConfig';
import PostProcessConfig from '../Controls/PostProcessConfig';
import ThemeBuilder from '../Controls/ThemeBuilder';
import { ChartConfig, ChartType, ThemeConfig } from '../../types/chartTypes';

// 定义TabPanel组件用于切换不同配置面板
interface TabPanelProps {
    children?: React.ReactNode;
    tabKey: string;
}

const TabPanel: React.FC<TabPanelProps> = ({ children, tabKey }) => {
    return (
        <div style={{ flexGrow: 1, overflowY: 'auto', height: '100%' }}>
            {children}
        </div>
    );
};

// 编辑器面板组件
const EditorPanel: React.FC = () => {
    const {
        state,
        updateChart,
        switchChartType,
        undo,
        redo,
        resetConfig,
        exportConfig,
        importConfig,
        togglePreviewMode,
        setEditingPart,
        updateDataConfig
    } = useEditor();

    const [activeTab, setActiveTab] = React.useState('config');
    const [activeKey, setActiveKey] = React.useState<string[]>([]);

    // 处理选项卡变化
    const handleTabChange = (key: string) => {
        setActiveTab(key);
        setEditingPart(key === 'config' ? 'config' : key === 'data' ? 'data' : 'theme');
    };

    const handleCollapseChange = (key: string | string[]) => {
        setActiveKey(Array.isArray(key) ? key : [key]);
    };

    // 导入配置
    const handleImportConfig = () => {
        const input = document.createElement('input');
        input.type = 'file';
        input.accept = '.json';
        input.onchange = (e) => {
            const file = (e.target as HTMLInputElement).files?.[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = (event) => {
                    try {
                        const content = event.target?.result as string;
                        const parsedConfig = JSON.parse(content);
                        // TODO: Add validation for parsedConfig against ChartConfig type
                        importConfig(content); // Assuming importConfig handles JSON string
                    } catch (err) {
                        console.error("Error importing config:", err);
                        // TODO: Show error to user (e.g., using a snackbar)
                    }
                };
                reader.readAsText(file);
            }
        };
        input.click();
    };

    // 导出配置
    const handleExportConfig = () => {
        const configJson = exportConfig(); // Assuming this returns a JSON string
        const blob = new Blob([configJson], { type: 'application/json;charset=utf-8;' });
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        // Use chart title in filename if available
        const filename = state.currentChart?.title?.text ? `${state.currentChart.title.text}.json` : 'chart-config.json';
        a.download = filename;
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
        URL.revokeObjectURL(url);
    };

    // 判断是否可以撤销和重做
    const canUndo = state.history.past.length > 0;
    const canRedo = state.history.future.length > 0;

    // Helper function to handle chart updates safely
    const handleChartUpdate = (change: Partial<ChartConfig>) => {
        // 添加日志以跟踪图表更新
        console.log('图表更新 - 更新内容:', change);

        // 创建一个更改的副本，以便我们可以修改它
        const processedChange = { ...change };

        // 检查主题更新是否为对象并转换为字符串ID (如果未在handleThemeUpdate中处理)
        if (processedChange.theme && typeof processedChange.theme === 'object') {
            const themeObj = processedChange.theme;
            const themeName = (themeObj.themeName || 'customTheme').replace(/\s+/g, '');

            try {
                // 注册主题 - 使用直接导入的echarts对象
                echarts.registerTheme(themeName, themeObj);
                console.log(`在handleChartUpdate中: 主题 "${themeName}" 已注册`);

                // 使用主题名而不是对象
                processedChange.theme = themeName;

                // 同时应用主题的颜色和背景色属性
                if (themeObj.backgroundColor && !processedChange.backgroundColor) {
                    processedChange.backgroundColor = themeObj.backgroundColor;
                    console.log('应用主题背景色:', themeObj.backgroundColor);
                }

                if (themeObj.color && !processedChange.color) {
                    processedChange.color = themeObj.color;
                    console.log('应用主题颜色系列');
                }
            } catch (error) {
                console.error('在handleChartUpdate中注册主题时出错:', error);
            }
        }

        // 执行更新
        updateChart(processedChange);

        // 添加日志确认更新后的状态
        console.log('图表更新后 - 当前图表配置:', state.currentChart);

        // 如果是主题更新，添加延迟后刷新，确保图表能正确应用新主题
        if ('theme' in change) {
            setTimeout(() => {
                console.log('主题更新后强制刷新');
                const refreshEvent = new Event('resize');
                window.dispatchEvent(refreshEvent);
            }, 100);
        }
    };

    // 处理主题更新
    const handleThemeUpdate = (themeConfig: ThemeConfig) => {
        console.log('主题更新:', themeConfig);

        // 确保主题配置拥有正确的属性
        const themeName = themeConfig.themeName || 'customTheme';
        const themeId = themeName.replace(/\s+/g, '');

        // 确保主题配置包含必要的属性
        const completeThemeConfig = {
            // 基本属性
            themeName: themeId,
            // 确保以下关键属性已设置，如果没有则使用默认值
            backgroundColor: themeConfig.backgroundColor || '#ffffff',
            color: themeConfig.color || ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'],
            textStyle: themeConfig.textStyle || { color: '#333333' },
            // 其他属性
            ...themeConfig
        };

        try {
            // 打印调试信息
            console.log('准备注册主题:', themeId);
            console.log('主题配置详情:', JSON.stringify(completeThemeConfig).slice(0, 200) + '...');

            // 由于无法可靠地访问已注册主题列表，我们直接注册主题
            // ECharts会覆盖同名主题，所以不需要显式清除旧主题

            // 使用直接导入的echarts对象注册主题
            console.log('开始注册主题:', themeId);
            echarts.registerTheme(themeId, completeThemeConfig);
            console.log(`主题 "${themeId}" 已成功注册`);

            // 从主题配置中提取所有重要的视觉样式属性
            // 在这一步，我们不仅更新主题ID，还手动提取主题的所有关键视觉属性并应用到图表配置中
            const themeUpdate: Partial<ChartConfig> = {
                // 设置主题ID
                theme: themeId,

                // 1. 基础视觉样式
                backgroundColor: completeThemeConfig.backgroundColor,
                color: completeThemeConfig.color,
                textStyle: completeThemeConfig.textStyle,

                // 2. 标题样式
                title: {
                    ...state.currentChart.title,
                    // 应用标题文本样式
                    ...(completeThemeConfig.title?.textStyle ? {
                        textStyle: {
                            ...(state.currentChart.title?.textStyle || {}),
                            ...completeThemeConfig.title.textStyle
                        }
                    } : {}),
                    // 应用副标题样式
                    ...(completeThemeConfig.title?.subtextStyle ? {
                        subtextStyle: {
                            ...(state.currentChart.title?.subtextStyle || {}),
                            ...completeThemeConfig.title.subtextStyle
                        }
                    } : {})
                },

                // 3. 图例样式
                legend: {
                    ...state.currentChart.legend,
                    ...(completeThemeConfig.legend?.textStyle ? {
                        textStyle: {
                            ...(state.currentChart.legend?.textStyle || {}),
                            ...completeThemeConfig.legend.textStyle
                        }
                    } : {})
                },

                // 4. 坐标轴样式
                // 在axis对象中集中管理所有坐标轴相关样式
                axis: {
                    ...state.currentChart.axis,

                    // X轴标签
                    xAxisLabel: {
                        ...(state.currentChart.axis?.xAxisLabel || {}),
                        color: completeThemeConfig.axis?.axisLabel?.color ||
                            completeThemeConfig.axisLabel?.color ||
                            completeThemeConfig.textStyle?.color
                    },

                    // Y轴标签
                    yAxisLabel: {
                        ...(state.currentChart.axis?.yAxisLabel || {}),
                        color: completeThemeConfig.axis?.axisLabel?.color ||
                            completeThemeConfig.axisLabel?.color ||
                            completeThemeConfig.textStyle?.color
                    },

                    // X轴线
                    xAxisLine: {
                        ...(state.currentChart.axis?.xAxisLine || {}),
                        ...(completeThemeConfig.axisLine?.lineStyle || completeThemeConfig.axis?.axisLine?.lineStyle ? {
                            lineStyle: {
                                ...(state.currentChart.axis?.xAxisLine?.lineStyle || {}),
                                ...(completeThemeConfig.axisLine?.lineStyle || completeThemeConfig.axis?.axisLine?.lineStyle || {})
                            }
                        } : {})
                    },

                    // Y轴线
                    yAxisLine: {
                        ...(state.currentChart.axis?.yAxisLine || {}),
                        ...(completeThemeConfig.axisLine?.lineStyle || completeThemeConfig.axis?.axisLine?.lineStyle ? {
                            lineStyle: {
                                ...(state.currentChart.axis?.yAxisLine?.lineStyle || {}),
                                ...(completeThemeConfig.axisLine?.lineStyle || completeThemeConfig.axis?.axisLine?.lineStyle || {})
                            }
                        } : {})
                    },

                    // 分割线
                    xSplitLine: {
                        ...(state.currentChart.axis?.xSplitLine || {}),
                        ...(completeThemeConfig.splitLine?.lineStyle ? {
                            lineStyle: {
                                ...(state.currentChart.axis?.xSplitLine?.lineStyle || {}),
                                ...completeThemeConfig.splitLine.lineStyle
                            }
                        } : {})
                    },

                    ySplitLine: {
                        ...(state.currentChart.axis?.ySplitLine || {}),
                        ...(completeThemeConfig.splitLine?.lineStyle ? {
                            lineStyle: {
                                ...(state.currentChart.axis?.ySplitLine?.lineStyle || {}),
                                ...completeThemeConfig.splitLine.lineStyle
                            }
                        } : {})
                    }
                },

                // 5. 工具提示样式
                tooltip: {
                    ...state.currentChart.tooltip,
                    ...(completeThemeConfig.tooltip ? {
                        backgroundColor: completeThemeConfig.tooltip.backgroundColor,
                        borderColor: completeThemeConfig.tooltip.borderColor,
                        borderWidth: completeThemeConfig.tooltip.borderWidth,
                        textStyle: {
                            ...(state.currentChart.tooltip?.textStyle || {}),
                            ...completeThemeConfig.tooltip.textStyle
                        }
                    } : {})
                },

                // 6. 数据系列样式 - 为每个系列应用主题颜色
                // 这是关键改进，确保主题颜色应用到数据系列上
                series: (state.currentChart.series || []).map((series, index) => {
                    // 获取对应的主题颜色
                    const colorIndex = index % (completeThemeConfig.color?.length || 1);
                    const themeColor = completeThemeConfig.color?.[colorIndex];

                    // 根据图表类型应用不同的样式处理
                    if (series.type === 'bar' || (!series.type && state.currentChart.type === 'bar')) {
                        return {
                            ...series,
                            // 应用柱状图样式
                            itemStyle: {
                                ...(series.itemStyle || {}),
                                // 仅当用户没有明确设置颜色时应用主题颜色
                                ...(!series.itemStyle?.color && themeColor ? { color: themeColor } : {})
                            }
                        };
                    } else if (series.type === 'line' || (!series.type && state.currentChart.type === 'line')) {
                        return {
                            ...series,
                            // 应用线图样式
                            lineStyle: {
                                ...(series.lineStyle || {}),
                                ...(!series.lineStyle?.color && themeColor ? { color: themeColor } : {})
                            },
                            itemStyle: {
                                ...(series.itemStyle || {}),
                                ...(!series.itemStyle?.color && themeColor ? { color: themeColor } : {})
                            }
                        };
                    } else if (series.type === 'pie' || (!series.type && state.currentChart.type === 'pie')) {
                        // 饼图通常使用全局颜色数组
                        return {
                            ...series,
                            // 饼图不需要在这里设置单一颜色
                        };
                    } else {
                        // 其他类型图表的通用处理
                        return {
                            ...series,
                            itemStyle: {
                                ...(series.itemStyle || {}),
                                ...(!series.itemStyle?.color && themeColor ? { color: themeColor } : {})
                            }
                        };
                    }
                })
            };

            // 将提取的主题属性应用到图表配置中
            handleChartUpdate(themeUpdate);

            // 主题应用后，强制刷新图表实例以确保所有视觉属性生效
            setTimeout(() => {
                // 特殊处理柱状图类型
                if (state.currentChart.type === 'bar') {
                    console.log('检测到柱状图，进行特殊主题处理');
                    // 柱状图特殊处理，需要触发一次额外的更新
                    const currentData = { ...state.currentChart };
                    if (currentData.series && currentData.series.length > 0 && themeUpdate.color) {
                        // 再次更新系列颜色
                        const updatedSeries = currentData.series.map((series, index) => {
                            const colorIndex = index % (themeUpdate.color?.length || 1);
                            const themeColor = themeUpdate.color[colorIndex];

                            return {
                                ...series,
                                itemStyle: {
                                    ...(series.itemStyle || {}),
                                    color: themeColor
                                }
                            };
                        });

                        // 应用更新后的系列
                        updateChart({ series: updatedSeries });
                    }
                }

                // 无论什么图表类型，都触发一次窗口大小变化事件以强制刷新
                console.log('主题应用后强制刷新图表');
                const refreshEvent = new Event('resize');
                window.dispatchEvent(refreshEvent);
            }, 200);

            // 成功后显示通知
            message.success(`主题 "${themeName}" 已应用`);

            // 强制重新创建图表实例以确保主题应用
            // 使用两种方法确保主题生效
            const forceRefresh = () => {
                console.log('强制刷新图表...');
                // 1. 尝试找到并直接访问图表容器
                const chartContainer = document.querySelector('.chart-container');
                if (chartContainer) {
                    console.log('找到图表容器，尝试重新创建图表实例');
                    // 发送resize事件给图表容器
                    window.dispatchEvent(new Event('resize'));
                }

                // 2. 同时使用延迟的resize事件作为备份
                setTimeout(() => {
                    console.log('使用延迟resize事件刷新图表');
                    window.dispatchEvent(new Event('resize'));
                }, 100);

                // 3. 最后一个保险措施 - 添加微小变化触发渲染
                setTimeout(() => {
                    // 对图表配置添加一个微小的改变，触发重新渲染
                    // 这不会改变图表外观，但会触发更新
                    const minorUpdate = {
                        animation: !state.currentChart.animation
                    };
                    handleChartUpdate(minorUpdate);

                    // 然后立即改回来
                    setTimeout(() => {
                        handleChartUpdate({
                            animation: state.currentChart.animation
                        });
                    }, 50);
                }, 200);
            };

            // 执行强制刷新
            forceRefresh();
        } catch (error) {
            console.error('注册主题时出错:', error);
            // 出错时，仍然应用主题的视觉属性
            handleChartUpdate({
                theme: completeThemeConfig,
                backgroundColor: completeThemeConfig.backgroundColor,
                color: completeThemeConfig.color,
                textStyle: completeThemeConfig.textStyle
            });
        }
    };

    // 处理图表类型变更
    const handleChartTypeChange = (type: ChartType) => {
        // 获取当前图表数据
        const currentChartData = { ...state.currentChart };
        // 保存当前使用的主题
        const currentTheme = currentChartData.theme;
        const currentBgColor = currentChartData.backgroundColor;
        const currentColors = currentChartData.color;
        const currentTextStyle = currentChartData.textStyle;

        console.log('图表类型变更 - 从', currentChartData.type, '切换到', type);
        console.log('当前图表是否有雷达图配置:', !!currentChartData.radar, '原始类型:', currentChartData._originalType);

        // 特殊处理关系图
        if (type === ChartType.GRAPH) {
            // 关系图特殊配置
            const newConfig = {
                type,
                title: currentChartData.title || {
                    show: true,
                    text: '图表标题',
                    subtext: '',
                    position: { left: 'center' },
                    textStyle: { color: '#333', fontSize: 18 }
                },
                tooltip: {
                    trigger: 'item',
                    formatter: function (params: any) {
                        if (params.dataType === 'edge') {
                            return params.name || `${params.data.source} > ${params.data.target}`;
                        }
                        return params.name || params.data.name || params.data.id || '';
                    }
                },
                legend: currentChartData.legend || {
                    show: true,
                    orient: 'horizontal',
                    position: { left: 'center', top: 'bottom' },
                    textStyle: { color: '#333', fontSize: 12 }
                },
                series: [{
                    type,
                    name: '关系图',
                    layout: 'force',
                    roam: true,
                    // 默认空节点和连接
                    data: [],
                    links: [],
                    // 力导向布局相关的配置项
                    force: {
                        repulsion: 100,
                        gravity: 0.1,
                        edgeLength: 30,
                        friction: 0.6
                    },
                    // 关系边的样式
                    lineStyle: {
                        color: '#aaa',
                        opacity: 0.7,
                        width: 1
                    }
                }]
            };

            // 从现有数据创建节点和链接
            if (currentChartData.series && Array.isArray(currentChartData.series) &&
                currentChartData.series[0]?.data && Array.isArray(currentChartData.series[0].data)) {

                const sourceData = currentChartData.series[0].data;

                // 创建中心节点
                const nodes = [
                    { id: 'center', name: '中心', symbolSize: 40, value: 100 }
                ];

                // 为每个数据点创建周围节点
                const links = sourceData.map((item, index) => {
                    const nodeId = `node${index}`;
                    let nodeName = '';
                    let nodeValue = 0;

                    // 尝试获取名称和值
                    if (typeof item === 'object' && item !== null) {
                        nodeName = (item as any).name || `类别${index + 1}`;
                        nodeValue = typeof (item as any).value === 'number' ? (item as any).value : 50;
                    } else if (typeof item === 'number') {
                        nodeName = `类别${index + 1}`;
                        nodeValue = item;
                    } else {
                        nodeName = String(item);
                        nodeValue = 50;
                    }

                    // 创建节点
                    nodes.push({
                        id: nodeId,
                        name: nodeName,
                        symbolSize: 20 + nodeValue / 10,
                        value: nodeValue
                    });

                    // 创建从中心到该节点的边
                    return {
                        source: 'center',
                        target: nodeId,
                        value: nodeValue
                    };
                });

                // 设置关系图数据
                newConfig.series[0].data = nodes;
                newConfig.series[0].links = links;
            }

            // 直接应用新配置
            updateChart(newConfig);
            return;
        }

        // 判断是否从2D切换到3D或从3D切换到2D
        const was3D = currentChartData.type?.includes('3D');
        const is3D = type.includes('3D');

        // 检查当前是否为雷达图
        const isCurrentlyRadar = currentChartData.type === 'radar' || currentChartData._originalType === 'radar';

        // 从雷达图切换到其他图表类型时，需要彻底清除雷达图配置
        if (isCurrentlyRadar && type !== 'radar') {
            console.log('从雷达图切换到其他类型，彻底清除雷达图配置');

            // 彻底清除雷达图特有配置
            if ('radar' in currentChartData) {
                delete currentChartData.radar;
            }
            if ('_originalType' in currentChartData) {
                delete currentChartData._originalType;
            }

            // 确保series的类型正确
            if (currentChartData.series && Array.isArray(currentChartData.series)) {
                currentChartData.series = currentChartData.series.map(series => {
                    // 从雷达图系列创建适合新图表类型的系列
                    const newSeries = {
                        ...series,
                        type, // 使用新的图表类型
                    };

                    // 清除雷达图特有的属性
                    delete newSeries.areaStyle;

                    // 根据新图表类型调整数据结构
                    if (Array.isArray(series.data)) {
                        if (type === 'pie') {
                            // 饼图需要 {name, value} 结构
                            newSeries.data = series.data.map((item, idx) => {
                                if (typeof item === 'object' && item !== null) {
                                    return {
                                        name: item.name || `项目${idx + 1}`,
                                        value: Array.isArray(item.value) && item.value.length > 0 ?
                                            item.value[0] : 10 * (idx + 1)
                                    };
                                }
                                return { name: `项目${idx + 1}`, value: 10 * (idx + 1) };
                            });
                        } else if (type === 'bar' || type === 'line') {
                            // 柱状图和折线图使用简单数组
                            newSeries.data = series.data.map((item, idx) => {
                                if (typeof item === 'object' && item !== null && Array.isArray(item.value)) {
                                    return item.value[0] || 10 * (idx + 1);
                                }
                                return 10 * (idx + 1);
                            });
                        } else if (type === 'scatter') {
                            // 散点图使用坐标对
                            newSeries.data = series.data.map((item, idx) => {
                                if (typeof item === 'object' && item !== null && Array.isArray(item.value)) {
                                    const val = item.value;
                                    return [val[0] || idx * 5, val[1] || idx * 5];
                                }
                                return [idx * 5, idx * 5];
                            });
                        }
                    }

                    return newSeries;
                });
            }
        }

        // 处理配置数据
        if (was3D !== is3D) {
            // 从3D切换到2D或从2D切换到3D时，重置特定的配置
            if (!is3D) {
                // 从3D切换到2D，移除3D特有配置
                if (currentChartData.grid) {
                    const { boxWidth, boxDepth, boxHeight, ...rest } = currentChartData.grid;
                    currentChartData.grid = rest;
                }
            } else {
                // 从2D切换到3D，设置3D默认配置
                currentChartData.grid = {
                    ...currentChartData.grid,
                    boxWidth: 200,
                    boxDepth: 80,
                    boxHeight: 100
                };
            }
        }

        // 更新图表类型并应用修改后的配置
        currentChartData.type = type;

        // 根据不同图表类型调整系列配置，确保主题颜色正确应用
        if (currentChartData.series && currentChartData.series.length > 0 && currentColors) {
            // 为新图表类型应用合适的系列样式
            currentChartData.series = currentChartData.series.map((series, index) => {
                // 为每个系列应用适当的主题颜色
                const colorIndex = index % (currentColors.length || 1);
                const themeColor = currentColors[colorIndex];

                // 根据新的图表类型调整系列样式
                if (type === 'bar') {
                    // 确保柱状图正确应用主题颜色
                    console.log(`应用柱状图主题颜色: ${themeColor} 到系列 ${index}`);
                    return {
                        ...series,
                        type: 'bar', // 确保系列类型匹配图表类型
                        // 重置其他样式以避免冲突
                        lineStyle: undefined, // 清除可能存在的线图样式
                        itemStyle: {
                            ...(series.itemStyle || {}),
                            color: themeColor // 强制应用主题颜色
                        },
                        // 确保适当的视觉样式
                        barWidth: series.barWidth || '40%', // 应用默认柱宽
                        emphasis: {
                            ...(series.emphasis || {}),
                            itemStyle: {
                                ...(series.emphasis?.itemStyle || {}),
                                // 强调状态使用亮一点的颜色
                                color: themeColor // 这里也可以使用颜色处理函数生成高亮颜色
                            }
                        }
                    };
                } else if (type === 'line') {
                    return {
                        ...series,
                        type: 'line',
                        lineStyle: {
                            ...(series.lineStyle || {}),
                            ...(!series.lineStyle?.color ? { color: themeColor } : {})
                        },
                        itemStyle: {
                            ...(series.itemStyle || {}),
                            ...(!series.itemStyle?.color ? { color: themeColor } : {})
                        }
                    };
                } else if (type === 'pie') {
                    // 饼图不需要为每个系列设置颜色，会自动使用color数组
                    return {
                        ...series,
                        type: 'pie',
                        // 保留现有样式配置
                    };
                } else if (type === 'scatter') {
                    return {
                        ...series,
                        type: 'scatter',
                        itemStyle: {
                            ...(series.itemStyle || {}),
                            ...(!series.itemStyle?.color ? { color: themeColor } : {})
                        }
                    };
                } else if (type === 'radar') {
                    return {
                        ...series,
                        type: 'radar',
                        // 为雷达图添加线条和区域样式
                        lineStyle: {
                            ...(series.lineStyle || {}),
                            ...(!series.lineStyle?.color ? { color: themeColor } : {})
                        },
                        areaStyle: {
                            ...(series.areaStyle || {}),
                            ...(!series.areaStyle?.color ? { color: themeColor, opacity: 0.3 } : {})
                        },
                        // 确保雷达图有默认数据结构
                        data: series.data || [
                            { name: '', value: [0, 0, 0, 0, 0] },
                            { name: '', value: [0, 0, 0, 0, 0] }
                        ]
                    };
                } else if (type.includes('3D')) {
                    return {
                        ...series,
                        type,
                        itemStyle: {
                            ...(series.itemStyle || {}),
                            ...(!series.itemStyle?.color ? { color: themeColor } : {})
                        }
                    };
                } else {
                    // 其他图表类型的通用处理
                    return {
                        ...series,
                        type,
                        itemStyle: {
                            ...(series.itemStyle || {}),
                            ...(!series.itemStyle?.color ? { color: themeColor } : {})
                        }
                    };
                }
            });
        }

        // 确保主题相关的视觉属性被保留
        // 这是防止切换图表类型时丢失主题设置
        currentChartData.theme = currentTheme;
        currentChartData.backgroundColor = currentBgColor;
        currentChartData.color = currentColors;
        currentChartData.textStyle = currentTextStyle;

        console.log('切换图表类型:', type);
        console.log('保留主题设置:', currentTheme);
        console.log('主题颜色:', currentColors?.slice(0, 3));

        // 对于柱状图和雷达图类型，需要特殊处理
        if (type === 'bar') {
            console.log('特殊处理柱状图主题应用');
            // 柱状图特殊处理，确保颜色被强制应用
            if (currentChartData.series && currentChartData.series.length > 0 && currentColors) {
                // 强制为每个柱状图系列应用颜色
                currentChartData.series = currentChartData.series.map((series, index) => {
                    const colorIndex = index % (currentColors.length || 1);
                    const color = currentColors[colorIndex];

                    // 确保类型设置正确
                    return {
                        ...series,
                        type: 'bar',
                        // 清除可能存在的其他图表类型特有样式
                        lineStyle: undefined,
                        areaStyle: undefined,
                        // 强制应用柱状图样式和颜色
                        itemStyle: {
                            color: color
                        }
                    };
                });
            }

            // 清除任何可能残留的雷达图配置
            if ('radar' in currentChartData) {
                delete currentChartData.radar;
            }
            if ('_originalType' in currentChartData) {
                delete currentChartData._originalType;
            }
        }
        // 雷达图特殊处理
        else if (type === 'radar') {
            console.log('特殊处理雷达图配置');

            // 创建全新的配置对象，而不是修改现有配置
            const radarConfig: ChartConfig = {
                // 仅保留基本设置
                title: currentChartData.title,
                tooltip: {
                    trigger: 'item', // 雷达图使用item trigger
                    ...(currentChartData.tooltip || {})
                },
                legend: currentChartData.legend,
                // 保留主题相关设置
                backgroundColor: currentBgColor,
                color: currentColors,
                textStyle: currentTextStyle,
                theme: currentTheme,
                // 雷达图特有配置
                radar: {
                    // 使用至少5个指标
                    indicator: Array.isArray(currentChartData.radar?.indicator) &&
                        currentChartData.radar.indicator.length > 0 ?
                        currentChartData.radar.indicator :
                        [
                            { name: '', max: 100 },
                            { name: '', max: 100 },
                            { name: '', max: 100 },
                            { name: '', max: 100 },
                            { name: '', max: 100 }
                        ],
                    shape: 'polygon',
                    center: ['50%', '50%'],
                    radius: '75%',
                    ...(currentChartData.radar || {})
                },
                // 雷达图系列配置
                series: []
            };

            // 转换现有系列为雷达图格式
            if (currentChartData.series && Array.isArray(currentChartData.series)) {
                radarConfig.series = currentChartData.series.map((series, index) => {
                    const colorIndex = index % (currentColors?.length || 1);
                    const color = currentColors ? currentColors[colorIndex] : '#5470c6';

                    // 尝试保留原始数据，如果可能的话
                    let radarData = [];

                    if (Array.isArray(series.data)) {
                        // 尝试转换现有数据为雷达图格式
                        radarData = series.data.map((item: any, idx: number) => {
                            // 如果已经是雷达图格式，直接使用
                            if (typeof item === 'object' && item !== null &&
                                typeof item.name === 'string' &&
                                Array.isArray(item.value)) {
                                // 确保value数组中没有null
                                return {
                                    name: item.name,
                                    value: item.value.map((v: any) => v === null ? 0 : v)
                                };
                            }

                            // 如果是数组，尝试作为value数组使用
                            if (Array.isArray(item)) {
                                return {
                                    name: `数据${idx + 1}`,
                                    value: item.map((v: any) => v === null ? 0 : v)
                                };
                            }

                            // 如果是简单值，创建单值数组
                            if (typeof item === 'number') {
                                // 创建一个与indicator数量相同长度的数组，首位为item值
                                const valueArray = new Array(radarConfig.radar.indicator.length).fill(0);
                                valueArray[0] = item;
                                return {
                                    name: `数据${idx + 1}`,
                                    value: valueArray
                                };
                            }

                            // 默认情况，创建零值数组
                            return {
                                name: `数据${idx + 1}`,
                                value: new Array(radarConfig.radar.indicator.length).fill(0)
                            };
                        });
                    }

                    // 如果无法从原始数据转换，或没有数据，创建空数组而不是默认样本
                    if (radarData.length === 0) {
                        // 创建空数组，在渲染时让用户添加数据，而不是使用默认样本
                        radarData = [];
                    }

                    return {
                        type: 'radar',
                        name: series.name || `系列${index + 1}`,
                        data: radarData,
                        // 应用样式
                        itemStyle: {
                            color: color
                        },
                        // 添加雷达图特有的样式
                        lineStyle: {
                            width: 2,
                            color: color
                        },
                        areaStyle: {
                            opacity: 0.3,
                            color: color
                        }
                    };
                });
            } else {
                // 如果没有系列，创建单个空系列
                radarConfig.series = [{
                    type: 'radar',
                    name: '系列1',
                    data: [], // 使用空数组而不是默认样本
                    itemStyle: {
                        color: currentColors ? currentColors[0] : '#5470c6'
                    },
                    lineStyle: {
                        width: 2,
                        color: currentColors ? currentColors[0] : '#5470c6'
                    },
                    areaStyle: {
                        opacity: 0.3,
                        color: currentColors ? currentColors[0] : '#5470c6'
                    }
                }];
            }

            // 记录原始类型为radar
            radarConfig._originalType = 'radar';

            // 移除直角坐标系图表的属性
            if ('xAxis' in radarConfig) delete radarConfig.xAxis;
            if ('yAxis' in radarConfig) delete radarConfig.yAxis;
            // 移除3D图表的属性
            if ('grid3D' in radarConfig) delete radarConfig.grid3D;
            if ('xAxis3D' in radarConfig) delete radarConfig.xAxis3D;
            if ('yAxis3D' in radarConfig) delete radarConfig.yAxis3D;
            if ('zAxis3D' in radarConfig) delete radarConfig.zAxis3D;

            // 更新图表配置，使用全新的雷达图配置
            updateChart(radarConfig);

            // 提前返回，避免执行后续updateChart
            return;
        }
        // 其他图表类型也需要清除雷达图的配置
        else if (type !== 'radar') {
            // 清除任何可能残留的雷达图配置
            if ('radar' in currentChartData) {
                delete currentChartData.radar;
            }
            if ('_originalType' in currentChartData) {
                delete currentChartData._originalType;
            }
        }

        // 使用updateChart函数更新图表配置
        updateChart(currentChartData);

        // 简化图表类型切换后的处理，只进行必要的DOM更新，不再自动重置类型
        setTimeout(() => {
            console.log('图表类型已切换，触发窗口resize事件更新图表尺寸...');
            window.dispatchEvent(new Event('resize'));

            // 特殊处理从3D到2D的转换
            if (was3D && !is3D) {
                console.log('从3D图表切换到普通图表，清理3D特有配置');

                // 从当前图表数据中获取最新状态
                const updatedChartData = { ...state.currentChart };

                // 清理所有3D特有配置
                delete updatedChartData.grid3D;
                delete updatedChartData.xAxis3D;
                delete updatedChartData.yAxis3D;
                delete updatedChartData.zAxis3D;
                delete updatedChartData.viewControl;
                delete updatedChartData.light;
                delete updatedChartData.postProcess;

                // 确保有基本的2D配置
                if (!updatedChartData.xAxis) {
                    updatedChartData.xAxis = { type: 'category', data: ['A', 'B', 'C'] };
                }
                if (!updatedChartData.yAxis) {
                    updatedChartData.yAxis = { type: 'value' };
                }

                // 重要：修改系列数据格式以适应2D图表
                if (updatedChartData.series && Array.isArray(updatedChartData.series)) {
                    updatedChartData.series = updatedChartData.series.map(series => {
                        // 将系列类型设置为新选择的类型
                        series.type = type;

                        // 清除3D特有属性
                        delete series.coordinateSystem;
                        delete series.shading;

                        // 保留原始数据并适当转换格式
                        if (series.data && Array.isArray(series.data)) {
                            // 对于bar或line图表，我们从3D数据中提取z值
                            if (type === 'bar' || type === 'line') {
                                series.data = series.data.map((item, index) => {
                                    if (Array.isArray(item) && item.length >= 3) {
                                        return item[2]; // 提取z值作为主值
                                    } else if (Array.isArray(item) && item.length >= 1) {
                                        return item[0]; // 至少提取一个值
                                    } else if (typeof item === 'object' && item !== null && item.value) {
                                        return Array.isArray(item.value) ? item.value[2] || 0 : item.value;
                                    } else if (typeof item === 'number') {
                                        return item; // 如果已经是数字，保持不变
                                    } else {
                                        console.log(`无法从3D数据中提取有效值，项目索引: ${index}`);
                                        return 0;
                                    }
                                });
                            }
                            // 对于散点图，我们提取x和y值
                            else if (type === 'scatter') {
                                series.data = series.data.map((item, index) => {
                                    if (Array.isArray(item) && item.length >= 2) {
                                        return [item[0], item[1]]; // 提取x,y值
                                    } else if (Array.isArray(item) && item.length === 1) {
                                        return [index, item[0]]; // 使用索引作为x，值作为y
                                    } else if (typeof item === 'object' && item !== null) {
                                        if (Array.isArray(item.value) && item.value.length >= 2) {
                                            return [item.value[0], item.value[1]];
                                        } else {
                                            return [index, item.value || 0];
                                        }
                                    } else if (typeof item === 'number') {
                                        return [index, item]; // 索引作为x，值作为y
                                    } else {
                                        console.log(`无法从3D数据中提取有效值，项目索引: ${index}`);
                                        return [index, 0];
                                    }
                                });
                            }
                            // 对于饼图，需要特殊处理
                            else if (type === 'pie') {
                                series.data = series.data.map((item, index) => {
                                    if (Array.isArray(item) && item.length >= 3) {
                                        return {
                                            name: `项目${index + 1}`,
                                            value: item[2] // 使用z值作为主值
                                        };
                                    } else if (typeof item === 'object' && item !== null) {
                                        return {
                                            name: item.name || `项目${index + 1}`,
                                            value: Array.isArray(item.value) ? item.value[2] || 0 : (item.value || 0)
                                        };
                                    } else if (typeof item === 'number') {
                                        return {
                                            name: `项目${index + 1}`,
                                            value: item
                                        };
                                    } else {
                                        console.log(`无法从3D数据中提取有效值，项目索引: ${index}`);
                                        return {
                                            name: `项目${index + 1}`,
                                            value: 0
                                        };
                                    }
                                });
                            }
                        }
                        // 只有在没有任何数据的情况下才使用空数组，不使用硬编码的默认数据
                        if (!series.data || !Array.isArray(series.data) || series.data.length === 0) {
                            series.data = [];
                        }

                        return series;
                    });
                }

                // 更新图表配置
                updateChart(updatedChartData);
            }
            // 特殊处理3D图表数据格式
            else if (is3D) {
                console.log('检测到3D图表类型，确保数据格式正确');

                // 获取最新图表配置
                const updatedChartData = { ...state.currentChart };

                // 特殊处理线路图
                if (type === 'lines3D' || type === 'path3D') {
                    if (updatedChartData.series && updatedChartData.series.length > 0) {
                        updatedChartData.series = updatedChartData.series.map(series => {
                            // 确保lines3D有正确的三层嵌套数据格式
                            if (!series.data || !Array.isArray(series.data)) {
                                // 创建默认数据
                                series.data = [
                                    [
                                        [0, 0, 0],
                                        [1, 0, 0],
                                        [1, 1, 0],
                                        [0, 1, 0],
                                        [0, 0, 0]
                                    ]
                                ];
                            }
                            else if (Array.isArray(series.data) && series.data.length > 0) {
                                // 检查嵌套层级
                                if (!Array.isArray(series.data[0])) {
                                    // 如果只有一层，包装成三层
                                    series.data = [[series.data]];
                                }
                                else if (Array.isArray(series.data[0]) && !Array.isArray(series.data[0][0])) {
                                    // 如果只有两层，包装成三层
                                    series.data = [series.data];
                                }
                            }

                            // 设置必要的属性
                            if (!series.lineStyle) series.lineStyle = {};
                            series.lineStyle.width = series.lineStyle.width || 4;
                            series.lineStyle.opacity = series.lineStyle.opacity || 1;

                            return series;
                        });
                    }
                }
                // 处理其他3D图表类型
                else if (type === 'bar3D' || type === 'scatter3D' || type === 'line3D') {
                    // 确保有grid3D配置
                    if (!updatedChartData.grid3D) {
                        updatedChartData.grid3D = {
                            boxWidth: 200,
                            boxDepth: 80,
                            boxHeight: 100,
                            viewControl: {
                                autoRotate: false,
                                distance: 100
                            }
                        };
                    }

                    // 确保有坐标轴
                    if (!updatedChartData.xAxis3D) {
                        updatedChartData.xAxis3D = {
                            type: 'category',
                            data: ['A', 'B', 'C']
                        };
                    }

                    if (!updatedChartData.yAxis3D) {
                        updatedChartData.yAxis3D = {
                            type: 'category',
                            data: ['X', 'Y', 'Z']
                        };
                    }

                    if (!updatedChartData.zAxis3D) {
                        updatedChartData.zAxis3D = {
                            type: 'value'
                        };
                    }

                    // 处理系列数据格式
                    if (updatedChartData.series && updatedChartData.series.length > 0) {
                        updatedChartData.series = updatedChartData.series.map(series => {
                            // 设置正确的类型
                            series.type = type;

                            // 确保数据是正确的3D格式
                            if (!series.data || !Array.isArray(series.data)) {
                                // 创建默认数据
                                series.data = [
                                    [0, 0, 10],
                                    [1, 0, 20],
                                    [2, 0, 30]
                                ];
                            }
                            else if (Array.isArray(series.data) && series.data.length > 0) {
                                // 检查是否需要转换为3D格式
                                const firstItem = series.data[0];
                                if (!Array.isArray(firstItem)) {
                                    // 转换为3D格式
                                    series.data = series.data.map((item, index) => {
                                        if (typeof item === 'object' && item !== null) {
                                            return [
                                                item.x !== undefined ? item.x : (item.name !== undefined ? item.name : index),
                                                item.y !== undefined ? item.y : (item.value !== undefined ? item.value : 0),
                                                item.z !== undefined ? item.z : 0
                                            ];
                                        } else {
                                            return [index, typeof item === 'number' ? item : 0, 0];
                                        }
                                    });
                                }
                                else if (Array.isArray(firstItem) && firstItem.length < 3) {
                                    // 补充成三维格式
                                    series.data = series.data.map((item, index) => {
                                        if (item.length === 1) return [index, item[0], 0];
                                        if (item.length === 2) return [...item, 0];
                                        return item;
                                    });
                                }
                            }

                            return series;
                        });
                    }
                }

                // 更新图表配置
                updateChart(updatedChartData);
            }
        }, 100);
    };

    // 更多操作下拉菜单项
    const moreMenuItems: MenuProps['items'] = [
        {
            key: 'import',
            icon: <UploadOutlined />,
            label: '导入配置',
            onClick: handleImportConfig
        },
        {
            key: 'export',
            icon: <SaveOutlined />,
            label: '导出配置',
            onClick: handleExportConfig
        },
        {
            type: 'divider'
        },
        {
            key: 'reset',
            icon: <ReloadOutlined />,
            label: '重置配置',
            danger: true,
            onClick: resetConfig
        }
    ];

    // 在调用handleChartUpdate前添加padding类型转换
    // 将数组类型的padding转换为数字（取第一个值）
    const convertPadding = (padding: number | number[] | undefined): number | undefined => {
        if (Array.isArray(padding)) {
            return padding.length > 0 ? padding[0] : undefined;
        }
        return padding;
    };

    // 判断当前图表是否为3D图表
    const is3DChart = state.currentChart.type?.includes('3D');

    // 在文件顶部添加辅助函数
    /**
     * 检查是否为3D图表类型
     */
    const is3DType = (type: ChartType): boolean => {
        return type === ChartType.BAR_3D ||
            type === ChartType.SCATTER_3D ||
            type === ChartType.LINE_3D ||
            type === ChartType.SURFACE;
    };

    return (
        <div style={{ display: 'flex', flexDirection: 'column', height: '100%', background: '#fff' }}>
            {/* Top Toolbar */}
            <div style={{ padding: '12px 16px', borderBottom: '1px solid #f0f0f0', display: 'flex', alignItems: 'center' }}>
                <Typography.Title level={4} style={{ margin: 0, flex: 1 }}>
                    编辑器
                </Typography.Title>
                <Space>
                    <Tooltip title="撤销">
                        <Button
                            type="text"
                            icon={<UndoOutlined />}
                            onClick={undo}
                            disabled={!canUndo}
                            size="small"
                        />
                    </Tooltip>
                    <Tooltip title="重做">
                        <Button
                            type="text"
                            icon={<RedoOutlined />}
                            onClick={redo}
                            disabled={!canRedo}
                            size="small"
                        />
                    </Tooltip>
                    <Tooltip title="预览">
                        <Button
                            type="text"
                            icon={<EyeOutlined />}
                            onClick={togglePreviewMode}
                            className={state.previewMode ? "ant-btn-primary" : ""}
                            size="small"
                        />
                    </Tooltip>
                    <Dropdown menu={{ items: moreMenuItems }} placement="bottomRight">
                        <Button
                            type="text"
                            icon={<MoreOutlined />}
                            size="small"
                        />
                    </Dropdown>
                </Space>
            </div>

            {/* Config/Data Tabs */}
            <Tabs
                activeKey={activeTab}
                onChange={handleTabChange}
                style={{ width: '100%' }}
                type="card"
                items={[
                    {
                        key: 'config',
                        label: '样式配置',
                        children: (
                            <TabPanel tabKey="config">
                                <div style={{ padding: 16 }}>
                                    <Space direction="vertical" style={{ width: '100%' }} size={16}>
                                        <ChartTypeSelector
                                            currentType={state.currentChart.type}
                                            onSelect={(type) => {
                                                console.log('选择图表类型:', type);
                                                // 记录类型切换前的状态
                                                const prevType = state.currentChart.type;

                                                // 创建全新的配置对象，始终使用这种方式处理所有图表类型切换
                                                if (type === 'radar') {
                                                    // 雷达图专用配置
                                                    const radarConfig = {
                                                        // 保留基本配置
                                                        title: state.currentChart.title ? { ...state.currentChart.title } : undefined,
                                                        tooltip: {
                                                            trigger: 'item'
                                                        },
                                                        legend: state.currentChart.legend ? { ...state.currentChart.legend } : { data: ['系列1'] },
                                                        // 保留主题相关配置
                                                        backgroundColor: state.currentChart.backgroundColor,
                                                        color: state.currentChart.color,
                                                        textStyle: state.currentChart.textStyle,
                                                        theme: state.currentChart.theme,
                                                        // 必须明确设置类型为radar
                                                        type: 'radar',
                                                        // 雷达图特有配置
                                                        radar: {
                                                            indicator: [
                                                                { name: '', max: 100 },
                                                                { name: '', max: 100 },
                                                                { name: '', max: 100 },
                                                                { name: '', max: 100 },
                                                                { name: '', max: 100 }
                                                            ],
                                                            shape: 'polygon',
                                                            center: ['50%', '50%'],
                                                            radius: '75%'
                                                        },
                                                        // 雷达图系列配置
                                                        series: [{
                                                            type: 'radar',
                                                            name: '系列1',
                                                            data: [{
                                                                name: '',
                                                                value: [0, 0, 0, 0, 0]
                                                            }],
                                                            lineStyle: {
                                                                width: 2,
                                                                color: state.currentChart.color ? state.currentChart.color[0] : '#5470c6'
                                                            },
                                                            areaStyle: {
                                                                opacity: 0.3,
                                                                color: state.currentChart.color ? state.currentChart.color[0] : '#5470c6'
                                                            }
                                                        }]
                                                    };

                                                    console.log('创建雷达图配置:', radarConfig);

                                                    // 强制清除所有其他图表类型的配置
                                                    delete radarConfig.xAxis;
                                                    delete radarConfig.yAxis;
                                                    delete radarConfig.grid;

                                                    // 直接更新图表配置
                                                    updateChart(radarConfig);

                                                    // 清空图表后手动强制刷新
                                                    setTimeout(() => {
                                                        console.log('雷达图手动强制刷新');
                                                        updateChart(radarConfig);
                                                    }, 50);
                                                } else {
                                                    // 非雷达图类型，创建对应的配置
                                                    let newConfig;

                                                    if (type === 'pie') {
                                                        // 饼图专用配置
                                                        newConfig = {
                                                            title: state.currentChart.title ? { ...state.currentChart.title } : undefined,
                                                            tooltip: {
                                                                trigger: 'item',
                                                                formatter: '{a} <br/>{b}: {c} ({d}%)'
                                                            },
                                                            legend: state.currentChart.legend ? { ...state.currentChart.legend } : {
                                                                orient: 'horizontal',
                                                                top: 'bottom',
                                                                data: ['类别A', '类别B', '类别C', '类别D', '类别E']
                                                            },
                                                            backgroundColor: state.currentChart.backgroundColor,
                                                            color: state.currentChart.color,
                                                            textStyle: state.currentChart.textStyle,
                                                            theme: state.currentChart.theme,
                                                            type: 'pie',
                                                            series: [{
                                                                name: '数据',
                                                                type: 'pie',
                                                                radius: '50%',
                                                                center: ['50%', '50%'],
                                                                data: [
                                                                    { value: 335, name: '类别A' },
                                                                    { value: 310, name: '类别B' },
                                                                    { value: 234, name: '类别C' },
                                                                    { value: 135, name: '类别D' },
                                                                    { value: 154, name: '类别E' }
                                                                ],
                                                                emphasis: {
                                                                    itemStyle: {
                                                                        shadowBlur: 10,
                                                                        shadowOffsetX: 0,
                                                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                                                    }
                                                                }
                                                            }]
                                                        };
                                                    } else if (type === 'scatter') {
                                                        // 散点图专用配置
                                                        newConfig = {
                                                            title: state.currentChart.title ? { ...state.currentChart.title } : undefined,
                                                            tooltip: {
                                                                trigger: 'item'
                                                            },
                                                            legend: state.currentChart.legend ? { ...state.currentChart.legend } : {
                                                                data: ['系列1']
                                                            },
                                                            backgroundColor: state.currentChart.backgroundColor,
                                                            color: state.currentChart.color,
                                                            textStyle: state.currentChart.textStyle,
                                                            theme: state.currentChart.theme,
                                                            type: 'scatter',
                                                            xAxis: {
                                                                type: 'value',
                                                                name: 'X'
                                                            },
                                                            yAxis: {
                                                                type: 'value',
                                                                name: 'Y'
                                                            },
                                                            series: [{
                                                                name: '系列1',
                                                                type: 'scatter',
                                                                data: [
                                                                    [10, 8.04],
                                                                    [8, 6.95],
                                                                    [13, 7.58],
                                                                    [9, 8.81],
                                                                    [11, 8.33]
                                                                ]
                                                            }]
                                                        };
                                                    } else if (type === 'line') {
                                                        // 折线图专用配置
                                                        newConfig = {
                                                            title: state.currentChart.title ? { ...state.currentChart.title } : undefined,
                                                            tooltip: {
                                                                trigger: 'axis'
                                                            },
                                                            legend: state.currentChart.legend ? { ...state.currentChart.legend } : {
                                                                data: ['系列1']
                                                            },
                                                            backgroundColor: state.currentChart.backgroundColor,
                                                            color: state.currentChart.color,
                                                            textStyle: state.currentChart.textStyle,
                                                            theme: state.currentChart.theme,
                                                            type: 'line',
                                                            xAxis: {
                                                                type: 'category',
                                                                data: ['一月', '二月', '三月', '四月', '五月']
                                                            },
                                                            yAxis: {
                                                                type: 'value'
                                                            },
                                                            series: [{
                                                                name: '系列1',
                                                                type: 'line',
                                                                data: [150, 230, 224, 218, 135]
                                                            }]
                                                        };
                                                    } else {
                                                        // 其他类型图表（包括柱状图）的默认配置
                                                        newConfig = {
                                                            title: state.currentChart.title ? { ...state.currentChart.title } : undefined,
                                                            tooltip: {
                                                                trigger: 'axis'
                                                            },
                                                            legend: state.currentChart.legend ? { ...state.currentChart.legend } : {
                                                                data: ['系列1']
                                                            },
                                                            backgroundColor: state.currentChart.backgroundColor,
                                                            color: state.currentChart.color,
                                                            textStyle: state.currentChart.textStyle,
                                                            theme: state.currentChart.theme,
                                                            type: type,
                                                            xAxis: {
                                                                type: 'category',
                                                                data: ['A', 'B', 'C', 'D', 'E']
                                                            },
                                                            yAxis: {
                                                                type: 'value'
                                                            },
                                                            series: [{
                                                                type: type,
                                                                name: '系列1',
                                                                data: [120, 200, 150, 80, 70]
                                                            }]
                                                        };
                                                    }

                                                    // 确保没有雷达图相关属性
                                                    delete newConfig.radar;
                                                    delete newConfig._originalType;

                                                    console.log('创建非雷达图配置:', newConfig);

                                                    // 直接更新图表配置
                                                    updateChart(newConfig);
                                                }

                                                // 使用TransitionEvent替代resize事件，减轻浏览器渲染负担
                                                setTimeout(() => {
                                                    // 避免频繁的控制台日志
                                                    if (process.env.NODE_ENV === 'development') {
                                                        console.log('图表类型切换完成');
                                                    }

                                                    // 使用TransitionEvent代替resize，更高效
                                                    const transEndEvent = new TransitionEvent('transitionend');
                                                    window.dispatchEvent(transEndEvent);

                                                    // 仅当绝对必要时才使用轻量级更新
                                                    if (type.includes('3D')) {
                                                        // 使用RAF优化3D图表渲染
                                                        requestAnimationFrame(() => {
                                                            // 轻量级更新，最小化对性能的影响
                                                            const dummyUpdate = {
                                                                animation: !state.currentChart.animation,
                                                                silent: true
                                                            };
                                                            updateChart(dummyUpdate);

                                                            // 确保视觉连贯性
                                                            requestAnimationFrame(() => {
                                                                updateChart({
                                                                    animation: state.currentChart.animation,
                                                                    silent: true
                                                                });
                                                            });
                                                        });
                                                    }
                                                }, 200);
                                            }}
                                        />
                                        <Divider style={{ margin: '12px 0' }} />

                                        <Collapse
                                            activeKey={activeKey}
                                            onChange={handleCollapseChange}
                                            bordered={false}
                                            expandIconPosition="end"
                                            items={[
                                                {
                                                    key: 'panelTitle',
                                                    label: <Typography.Text strong>标题</Typography.Text>,
                                                    children: (
                                                        <TitleConfig
                                                            title={state.currentChart.title ?? {}}
                                                            onChange={(title) => handleChartUpdate({ title })}
                                                        />
                                                    )
                                                },
                                                {
                                                    key: 'panelLegend',
                                                    label: <Typography.Text strong>图例</Typography.Text>,
                                                    children: (
                                                        <LegendConfig
                                                            legend={state.currentChart.legend ?? {}}
                                                            onChange={(legend) => handleChartUpdate({ legend })}
                                                        />
                                                    )
                                                },
                                                {
                                                    key: 'panelAxis',
                                                    label: <Typography.Text strong>坐标轴</Typography.Text>,
                                                    children: (
                                                        <AxisConfig
                                                            xAxis={{
                                                                axisLabel: state.currentChart.axis?.xAxisLabel || {},
                                                                axisLine: state.currentChart.axis?.xAxisLine || {},
                                                                axisTick: state.currentChart.axis?.xAxisTick || {},
                                                                splitLine: state.currentChart.axis?.xSplitLine || {},
                                                                name: state.currentChart.axis?.xAxisName?.text || '',
                                                                nameLocation: state.currentChart.axis?.xAxisName?.location || 'end',
                                                                nameTextStyle: state.currentChart.axis?.xAxisName?.textStyle || {}
                                                            }}
                                                            yAxis={{
                                                                axisLabel: state.currentChart.axis?.yAxisLabel || {},
                                                                axisLine: state.currentChart.axis?.yAxisLine || {},
                                                                axisTick: state.currentChart.axis?.yAxisTick || {},
                                                                splitLine: state.currentChart.axis?.ySplitLine || {},
                                                                name: state.currentChart.axis?.yAxisName?.text || '',
                                                                nameLocation: state.currentChart.axis?.yAxisName?.location || 'end',
                                                                nameTextStyle: state.currentChart.axis?.yAxisName?.textStyle || {}
                                                            }}
                                                            onChange={(axisConfig) => {
                                                                // 完整更新所有坐标轴配置
                                                                const updatedAxis = {
                                                                    // 标签相关配置
                                                                    xAxisLabel: {
                                                                        ...axisConfig.xAxisLabel,
                                                                        padding: convertPadding(axisConfig.xAxisLabel.padding)
                                                                    },
                                                                    yAxisLabel: {
                                                                        ...axisConfig.yAxisLabel,
                                                                        padding: convertPadding(axisConfig.yAxisLabel.padding)
                                                                    },
                                                                    // 轴线相关配置
                                                                    xAxisLine: {
                                                                        ...axisConfig.xAxisLine
                                                                    },
                                                                    yAxisLine: {
                                                                        ...axisConfig.yAxisLine
                                                                    },
                                                                    // 刻度线相关配置
                                                                    xAxisTick: {
                                                                        ...axisConfig.xAxisTick
                                                                    },
                                                                    yAxisTick: {
                                                                        ...axisConfig.yAxisTick
                                                                    },
                                                                    // 分割线相关配置
                                                                    xSplitLine: {
                                                                        ...axisConfig.xSplitLine
                                                                    },
                                                                    ySplitLine: {
                                                                        ...axisConfig.ySplitLine
                                                                    },
                                                                    // 坐标轴名称相关配置
                                                                    xAxisName: {
                                                                        ...axisConfig.xAxisName
                                                                    },
                                                                    yAxisName: {
                                                                        ...axisConfig.yAxisName
                                                                    }
                                                                };

                                                                handleChartUpdate({
                                                                    axis: updatedAxis
                                                                });
                                                            }}
                                                        />
                                                    )
                                                },
                                                {
                                                    key: 'panelSeries',
                                                    label: <Typography.Text strong>系列</Typography.Text>,
                                                    children: (
                                                        <SeriesConfig
                                                            series={state.currentChart.series ?? []}
                                                            chartType={state.currentChart.type}
                                                            onChange={(series) => handleChartUpdate({ series })}
                                                        />
                                                    )
                                                },
                                                {
                                                    key: 'panelGrid',
                                                    label: <Typography.Text strong>网格/画布</Typography.Text>,
                                                    children: (
                                                        <GridConfig
                                                            config={state.currentChart.grid}
                                                            onChange={(grid) => handleChartUpdate({ grid })}
                                                            is3D={is3DChart}
                                                        />
                                                    )
                                                },
                                                // 只有3D图表才显示3D视图控制面板
                                                ...(is3DChart ? [
                                                    {
                                                        key: 'panelViewControl',
                                                        label: <Typography.Text strong>视角控制</Typography.Text>,
                                                        children: (
                                                            <ViewControlConfig
                                                                config={state.currentChart.viewControl}
                                                                onChange={(viewControl) => handleChartUpdate({ viewControl })}
                                                            />
                                                        )
                                                    },
                                                    {
                                                        key: 'panelLight',
                                                        label: <Typography.Text strong>光照控制</Typography.Text>,
                                                        children: (
                                                            <LightConfigComponent
                                                                config={state.currentChart.light}
                                                                onChange={(light) => handleChartUpdate({ light })}
                                                            />
                                                        )
                                                    },
                                                    {
                                                        key: 'panelPostProcess',
                                                        label: <Typography.Text strong>后期效果</Typography.Text>,
                                                        children: (
                                                            <PostProcessConfig
                                                                config={state.currentChart.postProcess}
                                                                onChange={(postProcess) => handleChartUpdate({ postProcess })}
                                                            />
                                                        )
                                                    }
                                                ] : [])
                                            ]}
                                        />
                                    </Space>
                                </div>
                            </TabPanel>
                        )
                    },
                    {
                        key: 'data',
                        label: '数据映射',
                        children: (
                            <TabPanel tabKey="data">
                                <div style={{ padding: 16 }}>
                                    <DataMapping
                                        dataConfig={state.dataConfig}
                                        data={state.dataSource.data}
                                        chartType={state.currentChart.type}
                                    />
                                </div>
                            </TabPanel>
                        )
                    },
                    {
                        key: 'theme',
                        label: (
                            <span>
                                <BgColorsOutlined /> 主题构建
                            </span>
                        ),
                        children: (
                            <TabPanel tabKey="theme">
                                <div style={{ padding: 16 }}>
                                    <ThemeBuilder
                                        value={typeof state.currentChart.theme === 'object' ? state.currentChart.theme : undefined}
                                        onChange={handleThemeUpdate}
                                    />
                                </div>
                            </TabPanel>
                        )
                    }
                ]}
            />
        </div>
    );
};

export default EditorPanel;